<template>
  <div>
    <el-form size="mini" :inline="true">
      <el-form-item v-for="(item, index) in searchFormArr" :key="index" :label="item.fieldName">
        <!-- ipnut -->
        <el-input v-if="item.type == 'input'" :type="item.NameType" v-model.trim="fieldArr[item.field]" :placeholder="item.placeholder" style="width: 300px"></el-input>
        <el-input v-else-if="item.type == 'inputSearch'" v-model.trim="fieldArr[item.field]" :placeholder="item.placeholder" :type="item.NameType" style="width: 350px" class="input-with-select">
          <el-button size="mini" slot="append" type="primary" @click="submitForm()"><i class="el-icon-search" style="margin-right: 5px"></i>查询</el-button>
        </el-input>
        <!-- select -->
        <el-select v-else-if="item.type == 'select'" v-model="fieldArr[item.field]" :placeholder="item.placeholder" clearable :multiple="item.multiple || false" collapse-tags :style="`width: ${item.width}px` || 'width: 150px;'" @change="selectChange()">
          <el-option v-for="(itemOption, index) in item.option" :label="itemOption.text" :value="itemOption.id" :key="index"></el-option>
        </el-select>
        <!--任意时间范围-->
        <el-date-picker
          v-else-if="item.type == 'timePicker'"
          v-model="fieldArr[item.field]"
          :type="item.timeType || 'datetimerange'"
          :value-format="item.format || 'yyyy-MM-dd HH:mm:ss'"
          style="width: 300px"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="timePicker()"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" class="el-noColor" @click="resetForm()">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'searchui',
  data() {
    return {
      fieldArr: {
        time: [],
      },
    }
  },
  props: ['searchFormArr'],
  created() {
    // 表单默认值
    this.searchFormArr.forEach((item) => {
      if (item.default) {
        this.fieldArr[item.field] = item.default
      }
    })
  },
  methods: {
    // 搜索按钮
    submitForm() {
      this.$emit('searchParma', this.fieldArr)
    },
    // 重置
    resetForm() {
      this.fieldArr = {}
      this.$emit('searchParma', this.fieldArr)
    },
    //下拉选框
    selectChange() {
      this.$emit('searchParma', this.fieldArr)
    },
    //时间范围
    timePicker() {
      this.$emit('searchParma', this.fieldArr)
    },
    // 关闭弹窗清除表单
    resetFormClose() {
      this.fieldArr = {}
    },
  },
}
</script>

<style scoped>
/deep/ .el-input-group__append {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
}
/deep/ .el-form--inline .el-form-item {
  margin: 0 30px 0 0;
}
</style>
